<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有</vxe-button>
        <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
<!--        <vxe-button @click="exportExcel()">导出</vxe-button>-->
      </template>
    </vxe-toolbar>
    <vxe-table
      resizable
      ref="xTree"
      highlight-hover-row
      border="inner"
      row-key
      :tree-config="{ line: true, children: 'childrenList'}"
      :data="list">
      <vxe-table-column field="type_name" width="60%" title="属性名称" tree-node></vxe-table-column>
      <vxe-table-column field="number" width="20%" title="编号"></vxe-table-column>
      <vxe-table-column width="20%" title="操作">
        <template v-slot="{ row }">
          <Button size="small" v-if="row.level === '2' && row.id !== '10001' && row.id !== '10007'" type="primary" style="margin-right: 10px;" @click="addInfo(row)">添加下级</Button>
          <Button size="small" v-if="row.level !== '2'" type="info" style="margin-right: 10px" @click="updateInfo(row)">修改</Button>
          <Button size="small" v-if="row.level !== '2' && row.pid !== '10001' && row.pid !== '10007'" type="error" style="margin-right: 10px" @click="deleteInfo(row)">删除</Button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Modal v-model="updateShow" :title=showTitle>
      <Form :model="paramData" :label-width="80">
        <FormItem label="属性名称">
          <Input v-model="paramData.type_name" placeholder="请输入属性名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="clearData">取消</Button>
        <Button v-if="showTitle === '添加'" type="info" @click="addOk">确定</Button>
        <Button v-if="showTitle === '编辑'" type="info" @click="updateOk">确定</Button>
      </div>
    </Modal>
    <Modal v-model="deleteShow" title='删除' @on-cancel="deleteShow = false" @on-ok="deleteOk()">
      <div style="text-align: center">是否删除此属性</div>
    </Modal>
  </div>
</template>
<script>
import { personnelTypeService, savePersonnelType, updatePersonnelType, deletePersonnelType } from '@/api/worker.js'
export default {
  data () {
    return {
      deleteShow: false,
      showTitle: '',
      paramData: {},
      updateShow: false,
      list: []
    }
  },
  methods: {
    init () {
      personnelTypeService().then(res => {
        if (res.data.errcode === 0) {
          this.list = res.data.data
        } else {
          this.$Notice.error({
            title: '获取失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addInfo (item) {
      this.showTitle = '添加'
      this.paramData = {
        pid: item.id,
        level: '3'
      }
      this.updateShow = true
    },
    updateInfo (item) {
      this.showTitle = '编辑'
      this.paramData = this.$common.xeUtils.clone(item,true)
      this.updateShow = true
    },
    addOk () {
      savePersonnelType(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.updateShow = false
          this.init()
          this.showTitle = ''
          this.paramData = {}
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    updateOk () {
      let param = {
        id: this.paramData.id,
        type_name: this.paramData.type_name
      }
      updatePersonnelType(param).then(res => {
        if (res.data.errcode === 0) {
          this.updateShow = false
          this.init()
          this.showTitle = ''
          this.paramData = {}
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    clearData () {
      this.updateShow = false
      this.paramData = {}
      this.showTitle = ''
    },
    deleteInfo (item) {
      this.paramData = this.$common.xeUtils.clone(item,true)
      this.deleteShow = true
    },
    deleteOk () {
      deletePersonnelType(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          this.deleteShow = false
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: res.data.errmsg
          })
        }
      })
    }

  },
  mounted() {
    this.init()
  }
}
</script>
<style>

</style>
